<template>
<view class="login-pwd-box h100 bg-white text-black">
  <form>
    <view class="cu-form-group">
      <view class="title">手机号</view>
      <input placeholder="请输入手机号" name="mobile" :maxlength="11" @input="mobileInput" :value="mobile"/>
    </view>
    <view class="cu-form-group border-bottom">
      <view class="title">密码</view>
      <input password placeholder="请输入登录密码" name="password" @input="passwordInput" :value="password"/>
      <view class="text-orange padding-left" @tap="gotoPage('forgetPassword')">忘记密码?</view>
    </view>
  </form>

  <view class="flex flex-direction margin-top-xl padding">
    <button class="cu-btn dm-btn round bg-orange text-xl" @tap="onLogin">登录</button>
  </view>

  <!-- <view class="text-grey text-center margin-top" @tap="gotoPage('login-code')">其他登录方式</view> -->
</view>
</template>

<script>
export default {
  name: 'login-pwd',
  data () {
    return {
      mobile: '',
      password: ''
    }
  },
  computed: {
    loginParams() {
      return {
        mobile: this.mobile,
        password: this.password
      }
    }
  },
  methods: {
    /** 点击注册 */
    onNavigationBarButtonTap(obj) {
      console.log('注册', obj)
      this.gotoPage('register')
    },
    mobileInput(e) {
      this.mobile = e.detail.value.trim()
    },
    passwordInput(e) {
      this.password = e.detail.value.trim()
    },
    onLogin() {
      this.$api.pwdLogin(this.loginParams).then(async res => {
        if (!res) return
        console.log('密码登录', res)
        const resData = res.data
        const {userinfo} = resData
        this.$store.dispatch('handleLogin', userinfo)
        await this.$showSuccessToast('登录成功')
        this.gotoHomePage()
      })
    },
    gotoPage(routeName) {
      this.$Router.push({
        name: routeName
      })
    },
    gotoHomePage() {
      this.$Router.pushTab({
        name: 'home'
      })
    }
  }
}
</script>

<style lang="less">
</style>
